<template>
  <!--添加报价-->
  <div class="add-quote-index module-index">
    <order-module-title title="添加报价"/>
    <div class="add-quote-body">
      <div class="body-item">
        <span style="color: red">*</span>
        单价 元/kg
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        载重 kg
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        总里程
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        运输费
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        其他费用
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        费用总计
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        报价有效截止期
      </div>
      <el-input class="body-item" type="text" @change="addSumFee(data.fee)"  v-model="data.fee"/>
      <el-input class="body-item" type="text" @change="addSumLoad(data.maxLoad)" v-model="data.maxLoad"/>
      <el-input class="body-item" type="text" @change="addSumMileage(data.mileage)" v-model="data.mileage"/>
      <el-input class="body-item" type="text" v-model="data.freight"/>
      <el-input class="body-item" type="text" @change="addSumOther(data.otherFees)" v-model="data.otherFees"/>
      <el-input class="body-item" type="text" v-model="data.totalFees"/>
      <el-date-picker
          class="body-item"
          v-model="data.validEndTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="报价有效截止期">
      </el-date-picker>

      <div style="clear: both"></div>
    </div>
  </div>
</template>

<script>
import OrderModuleTitle from "@/components/order/component/OrderModuleTitle";
import {ItemAdd} from "@/utils/constant/listElementCompute";

export default {
  name: "AddQuote",
  components: {
    OrderModuleTitle,

  },
  props: {
    info: {}
  },
  data() {
    return {
      data: {
        fee: 0,
        maxLoad: 0,
        mileage: 0,
        freight: 0,
        otherFees: 0,
        totalFees: 0,
        validEndTime: '',
      }
    }
  },
  created() {
    this.init()
  },
  watch: {
    info: function (newValue, oldValue) {
      console.log(oldValue)
      if (newValue !== undefined) {
        this.data = this.info
      }
    },
  },
  methods: {
    async init() {

    },
    addSumFee(count){
      this.data.fee = Number(count)
      this.data.freight = Number(count) + Number(this.data.maxLoad)
    },
    addSumLoad(count){
      this.data.maxLoad = Number(count)
      this.data.freight = Number(count) + Number(this.data.fee)
    },
    addSumOther(count){
      this.data.otherFees = Number(count)
      this.data.totalFees = Number(count) + this.data.freight
    },
    addSumMileage(count){
      this.data.mileage = Number(count)
    },
  }
}
</script>

<style scoped lang="scss">
.add-quote-index {
  margin: 20px 0;


  .add-quote-body {

    margin-top: 10px;
    width: 220px * 7 + 1px;
    max-width: 220px * 7 + 1px;
    text-align: center;
    border-top: 1px black solid;
    border-left: 1px black solid;

    .body-item {
      width: 220px;
      float: left;
      height: 42px;
      line-height: 42px;
      font-size: 15px;
      border-right: 1px black solid;
      border-bottom: 1px black solid;
    }

    .item-title {
      background-color: #B3C0D1;
    }

  }


}
</style>